<template>
 
    <!-- 网络设备页面 -->
    <div class="app-container network-container">
      <div class="listBox"> 
        <el-button type="text" icon="el-icon-s-promotion" @click="toListIndex">返回首页</el-button>
      </div>
      <div>
        <el-button type="text" icon="el-icon-back" @click="back">返回</el-button>
      </div>
      <el-divider content-position="left">网络设备清单</el-divider>
      <div class="table">
        <el-table :data="tableData"  v-loading="loading" height="500" border stripe>
        <!-- 序号列是固定这么写的 type="index" 他就会有序号列 -->
        <el-table-column label="序号" type="index" width="50"> </el-table-column>
        <el-table-column prop="name" label="名称" width="130"></el-table-column>
        <el-table-column prop="detailed" label="详细" width="150"></el-table-column>
        <el-table-column prop="position" label="安装位置" width="80"></el-table-column>
        <el-table-column prop="num" label="数量" width="50"></el-table-column>
        <el-table-column prop="procureTime" label="采购时间" width="100"></el-table-column>
        <el-table-column prop="totalAmount" label="总金额" width="80"></el-table-column>
        <el-table-column prop="purchasingUnit" label="采购单位" width="150"></el-table-column>
        <el-table-column prop="function" label="功能说明">
          <!-- <el-button type="text" @click="functionVisible = true">点击查看功能</el-button>
          <el-dialog
            title="功能说明"
            :visible.sync="functionVisible"
            width="40%"
            >
            <span>这是一段信息</span>
          </el-dialog> -->
        </el-table-column>
        <el-table-column prop="notes" label="备注" width="80"></el-table-column>
        </el-table>
      </div>
  
  </div>
</template>

<script>

export default {
  name: 'Network',
  data() {
   return {
     // 表格数据
     tableData: [],
     // 定义加载状态
     loading: false,
   }
  },
  mounted() { 
    this.getList()
  },
  methods: {
    back() {
        this.$router.go(-1)
      },
       // 返回首页
    toListIndex() {
        this.$router.push({
          path: '/ListIndex'
        })
    },
    getList() {
      // 开始加载
      this.loading = true
      setTimeout(() => {
        const res = {
          code: 200,
          data: [
            {name:'光纤交换机', detailed:'OS SNS2124',position:'二机柜',num:1 , procureTime:'2017-12-17', totalAmount:'45000', purchasingUnit:'河北环天电子科技有限公司', function:'本地光纤交换机为存储光纤交换机（SAN），是一个由存储设备和系统部件构成的网络，所有的通信都在一个光纤通道的网络上完成，可以被用来集中和共享存储资源，为光纤存储、备份、服务器提供数据传输。',notes:''},
            {name:'H3C交换机', detailed:'s5560',position:'一机柜',num:2 , procureTime:'2021-9-30', totalAmount:'25800', purchasingUnit:'石家庄欣飞东方科技有限公司', function:'网络交换机提供对诚信系统私有云服务器平台进行数据交换', notes:''},
            {name:'KVM切换器', detailed:'浪潮 16口',position:'二机柜',num:1 , procureTime:'2016-6-14', totalAmount:'19500', purchasingUnit:'河北康盛电子科技有限公司', function:'通过1台KVM切换器可控制多个服务器的界面，节省空间，方便运维',notes:'' },
            {name:'服务器机柜', detailed:'浪潮42U',position:'西院机房',num:1 , procureTime:'2017-12-16', totalAmount:'8934', purchasingUnit:'河北通尚信息技术有限公司', function:'' ,notes:''}
          ],
          msg: '获取数据成功'
        }
        this.tableData = res.data
        this.loading = false
      }, 1000)
    }
  }
  
}
</script>
<style lang="less" scoped>
  .network-container {
    position: relative;
    .el-divider__text {
      font-size: 18px;
    }
    .listBox {
      position: absolute;
        top: 6%;
        right:3%;
       
      }
  }
</style>